<template>
  <el-dialog
    class="detailDialog"
    v-model="props.detailVisible"
    title="出库详情"
    width="45%"
    :close-on-click-modal="false"
    @close="close"
  >
    <el-row class="row">
      <el-col :span="10">
        <div>出库类型：{{ props.outForm?.form.retrievalType }}</div>
      </el-col>
      <el-col :span="10">
        <div>
          关联单号：{{ props.outForm?.form.orderNum }}
          <span class="copy" @click="copyText">复制</span>
        </div>
      </el-col>
    </el-row>
    <el-row class="row">
      <el-col :span="10">
        <div>出库备件数量：{{ props.outForm?.form.totalAmount }}</div>
      </el-col>
      <el-col :span="10">
        <div>备件总价值：{{ props.outForm?.form.totalMoney }}元</div>
      </el-col>
    </el-row>
    <el-row class="row">
      <el-col :span="10">
        <div>申请人：{{ props.outForm?.form.applyUserName }}</div>
      </el-col>
      <el-col :span="10">
        <div>出库人：{{ props.outForm?.form.createUserName }}</div>
      </el-col>
    </el-row>
    <el-row class="row">
      <el-col :span="10">
        <div>出库时间：{{ props.outForm?.form.updateTime }}</div>
      </el-col>
    </el-row>
    <el-row class="row">
      <el-col :span="24">
        <div>出库备件列表</div>
        <el-table
          :data="tableData"
          style="width: 100%"
          :span-method="objectSpanMethod"
          border
        >
          <el-table-column type="index" label="序号" width="80" />
          <el-table-column prop="partNum" label="备件编号" width="120" />
          <el-table-column prop="partName" label="备件名称" width="120" />
          <el-table-column prop="partTypeName" label="备件类型" width="120" />
          <el-table-column prop="applyAmount" label="申请数量" width="100" />
          <el-table-column prop="approveStatus" label="审核结果" width="120">
            <template #default="scope">
              <div v-if="scope.row.approveStatus == 2">
                <span>不通过</span>
                <el-popover
                  placement="top-start"
                  title="原因"
                  :width="200"
                  trigger="hover"
                  :content="scope.row.reason"
                >
                  <template #reference>
                    <svg
                      t="1681107624752"
                      class="icon"
                      viewBox="0 0 1024 1024"
                      version="1.1"
                      xmlns="http://www.w3.org/2000/svg"
                      p-id="3558"
                      width="20"
                      height="20"
                    >
                      <path
                        d="M976.738462 704.984615c27.569231-63.015385 39.384615-129.969231 39.384615-196.923077s-11.815385-133.907692-39.384615-196.923076S913.723077 196.923077 866.461538 149.661538c-47.261538-47.261538-102.4-82.707692-161.476923-110.276923-63.015385-27.569231-129.969231-39.384615-196.923077-39.384615s-133.907692 11.815385-196.923076 39.384615S196.923077 102.4 149.661538 149.661538 66.953846 248.123077 39.384615 311.138462c-27.569231 63.015385-39.384615 129.969231-39.384615 196.923076s11.815385 133.907692 39.384615 196.923077c27.569231 59.076923 63.015385 114.215385 110.276923 161.476923 47.261538 47.261538 102.4 82.707692 161.476924 110.276924 63.015385 27.569231 129.969231 39.384615 196.923076 39.384615s133.907692-11.815385 196.923077-39.384615c59.076923-27.569231 114.215385-63.015385 161.476923-110.276924 47.261538-47.261538 82.707692-98.461538 110.276924-161.476923z m-31.507693-196.923077c0 59.076923-11.815385 114.215385-35.446154 169.353847-23.630769 51.2-55.138462 98.461538-94.523077 137.846153s-86.646154 70.892308-137.846153 94.523077c-55.138462 23.630769-110.276923 35.446154-169.353847 35.446154s-114.215385-11.815385-169.353846-35.446154c-51.2-23.630769-98.461538-55.138462-137.846154-94.523077s-70.892308-86.646154-94.523076-137.846153c-23.630769-55.138462-35.446154-110.276923-35.446154-169.353847s11.815385-114.215385 35.446154-169.353846C126.030769 283.569231 157.538462 240.246154 200.861538 196.923077c39.384615-39.384615 86.646154-70.892308 137.846154-94.523077 55.138462-23.630769 110.276923-35.446154 169.353846-35.446154s114.215385 11.815385 169.353847 35.446154c55.138462 23.630769 98.461538 55.138462 141.784615 94.523077 39.384615 39.384615 70.892308 86.646154 94.523077 137.846154 19.692308 59.076923 31.507692 114.215385 31.507692 173.292307z"
                        fill="#C2C2C2"
                        p-id="3559"
                      ></path>
                      <path
                        d="M508.061538 153.6c-47.261538 0-90.584615 39.384615-90.584615 90.584615s39.384615 90.584615 90.584615 90.584616 90.584615-39.384615 90.584616-90.584616-43.323077-90.584615-90.584616-90.584615zM464.738462 823.138462c3.938462 7.876923 3.938462 11.815385 11.815384 15.753846 3.938462 3.938462 7.876923 7.876923 15.753846 11.815384 7.876923 3.938462 11.815385 3.938462 19.692308 3.938462h7.876923c3.938462 0 7.876923 0 7.876923-3.938462 3.938462 0 3.938462-3.938462 7.876923-3.938461 3.938462-3.938462 3.938462-3.938462 7.876923-3.938462 0-3.938462 3.938462-3.938462 3.938462-7.876923s3.938462-3.938462 3.938461-7.876923 3.938462-3.938462 3.938462-7.876923v-7.876923h-47.261539 47.261539v-354.461539-7.876923c0-3.938462 0-7.876923-3.938462-7.876923 0-3.938462-3.938462-3.938462-3.938461-7.876923s-3.938462-3.938462-3.938462-7.876923c-3.938462 0-3.938462-3.938462-7.876923-3.938461s-3.938462-3.938462-7.876923-3.938462-3.938462-3.938462-7.876923-3.938461H512h-7.876923c-3.938462 0-7.876923 0-7.876923 3.938461-3.938462 0-3.938462 3.938462-7.876923 3.938462-3.938462 3.938462-3.938462 3.938462-7.876923 3.938461 0 3.938462-3.938462 3.938462-3.938462 7.876923s-3.938462 3.938462-3.938461 7.876923-3.938462 7.876923-3.938462 7.876923v7.876923h47.261539-47.261539v354.461539c-7.876923 0-7.876923 3.938462-3.938461 11.815385z"
                        fill="#C2C2C2"
                        p-id="3560"
                      ></path>
                    </svg>
                  </template>
                </el-popover>
              </div>
              <div v-else>
                {{
                  scope.row.approveStatus == 1
                    ? '待审核'
                    : scope.row.approveStatus == 3
                    ? '通过'
                    : ''
                }}
              </div>
            </template>
          </el-table-column>
          <el-table-column prop="batchNum" label="备件批次号" width="150" />
          <el-table-column prop="amount" label="出库数量" width="120" />
          <el-table-column prop="price" label="单价(元)" width="120">
            <template #default="scope">
              <div>
                {{
                  scope.row.price != ''
                    ? scope.row.price + '/' + scope.row.partUnit
                    : ''
                }}
              </div>
            </template>
          </el-table-column>
        </el-table>
      </el-col>
    </el-row>
  </el-dialog>
</template>
<script setup lang="ts">
import { ElMessage, SpanMethodProps } from 'element-plus'
import useClipboard from 'vue-clipboard3'
import { ref, reactive, watch } from 'vue'
const { toClipboard } = useClipboard()
const props = defineProps({
  detailVisible: Boolean,
  outForm: Object
})

const emit = defineEmits(['closeDetail'])
const close = () => {
  emit('closeDetail')
}

const tableData = ref<any>([])

const copyText = async () => {
  try {
    if (props.outForm?.form.orderNum == '') {
      ElMessage({
        type: 'warning',
        message: '暂无内容'
      })
    } else {
      await toClipboard(props.outForm?.form.orderNum)
      ElMessage({
        type: 'success',
        message: '复制成功'
      })
    }
  } catch (e) {
    console.error(e)
  }
}

watch(
  () => props.detailVisible,
  () => {
    if (props.detailVisible == true) {
      props.outForm?.form.partDetailResponses.forEach((item: any) => {
        var b = tableData.value.length
        if (item.detailResponses.length == 0) {
          let obj = {
            partNum: item.partNum,
            partName: item.partName,
            partTypeName: item.partTypeName,
            applyAmount: item.applyAmount,
            approveStatus: item.approveStatus,
            partUnit: item.partUnit,
            reason: item.reason,
            rowNum: b,
            price: '',
            batchNum: '',
            amount: '',
            totalMoney: '',
            num: 1
          }
          tableData.value.push(obj)
        } else {
          item.detailResponses.forEach((i: any) => {
            let obj = {
              partNum: item.partNum,
              partName: item.partName,
              partTypeName: item.partTypeName,
              applyAmount: item.applyAmount,
              approveStatus: item.approveStatus,
              partUnit: item.partUnit,
              reason: item.reason,
              rowNum: b,
              price: '',
              batchNum: '',
              amount: '',
              totalMoney: '',
              num: item.detailResponses.length
            }
            obj.price = i.price
            obj.batchNum = i.batchNum
            obj.amount = i.amount
            obj.totalMoney = i.totalMoney
            tableData.value.push(obj)
          })
        }
      })
    } else {
      tableData.value = []
    }
  }
)

const objectSpanMethod = ({
  row,
  column,
  rowIndex,
  columnIndex
}: SpanMethodProps) => {
  if (columnIndex < 5) {
    if (rowIndex === row.rowNum && row.num != 1) {
      return {
        rowspan: row.num,
        colspan: 1
      }
    }
    if (row.rowNum === 0 && rowIndex != 0 && rowIndex <= row.num - 1) {
      return {
        rowspan: 0,
        colspan: 0
      }
    }
    if (rowIndex > row.rowNum && rowIndex <= row.rowNum * row.num) {
      return {
        rowspan: 0,
        colspan: 0
      }
    }
  }
}
</script>
<style scoped lang="scss">
.detailDialog {
  .row {
    font-size: var(--el-font-size-base);
    margin-bottom: 8px;
  }

  .info {
    font-size: 18px;
    font-weight: 600;
  }
}

.pcInfo {
  margin-bottom: 8px;

  > span {
    margin-right: 16px;
    font-weight: 400;
    line-height: 22px;
  }
}

.copy {
  margin-left: 5px;
  color: var(--el-color-primary);
  cursor: pointer;
}
</style>
